// 用户管理组件
const userManagementComponent = {
    template: `<div class="container">
        <h2>用户管理</h2>
        <div class="user-form">
            <h3>添加新用户</h3>
            <div class="form-group">
                <label>姓名</label>
                <input type="text" v-model="newUser.name" placeholder="输入用户名">
            </div>
            <div class="form-group">
                <label>邮箱</label>
                <input type="email" v-model="newUser.email" placeholder="输入邮箱">
            </div>
            <button class="btn" @click="addUser">添加用户</button>
        </div>

        <div class="search-box">
            <input type="text" v-model="searchTerm" placeholder="搜索用户..." @input="filterUsers">
        </div>

        <div class="user-list-container">
            <div class="user-list">
                <div class="user-item" v-for="user in filteredUsers" :key="user.id">
                    <div class="user-details">
                        <h4>{{ user.name }}</h4>
                        <p>{{ user.email }}</p>
                    </div>
                    <div class="user-actions">
                        <button class="btn btn-danger" @click="deleteUser(user.id)">删除</button>
                    </div>
                </div>
                <div v-if="filteredUsers.length === 0" class="loading">没有找到用户</div>
            </div>
        </div>
    </div>`,
    props: ['appModule'],
    data() {
        return {
            newUser: { name: '', email: '' },
            searchTerm: ''
        };
    },
    computed: {
        filteredUsers() {
            return this.appModule ? this.appModule.getFilteredUsers() : [];
        }
    },
    methods: {
        addUser() {
            if (!this.newUser.name || !this.newUser.email) {
                alert('请填写用户名和邮箱');
                return;
            }

            if (this.appModule && this.appModule.userModule) {
                this.appModule.userModule.addUser(this.newUser.name, this.newUser.email);
                this.newUser = { name: '', email: '' };
            }
        },
        deleteUser(userId) {
            if (confirm('确定要删除该用户吗？')) {
                if (this.appModule && this.appModule.userModule) {
                    this.appModule.userModule.deleteUser(userId);
                }
            }
        },
        filterUsers() {
            if (this.appModule) {
                this.appModule.state.userSearch = this.searchTerm;
            }
        }
    }
};

export { userManagementComponent };